<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { getApi } from "@/api/stock"
import { RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { utils, writeFile } from "xlsx"
import dayjs from "dayjs"

defineOptions({
  // 命名当前组件
  name: "ErpOrders"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

const tableData = ref<any[]>([])

const params = reactive({
  erp_data_date: "",
  file: ""
})

const getTableData = () => {
  loading.value = true
  getApi({
    page: paginationData.page,
    size: paginationData.size,
    erp_data_date: params.erp_data_date
  })
    .then(({ data }: any) => {
      paginationData.total = data.pagination.total
      tableData.value = data.list
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

//#endregion

/** 监听分页参数的变化 */
watch([() => paginationData.page, () => paginationData.size], getTableData, { immediate: true })

const exportTotalData = async () => {
  const totalData = [
    {
      store_name: "点燃",
      data: {
        orderNums: 140000,
        orderPayableAmount: 123123.3,
        actualDiscountsForInfluencer: 12,
        actualPlatformDiscount: 13,
        productCB: 222,
        kuaidi: 33,
        platFormConmission: 31,
        conmission: 22,
        leaderConmission: 44,
        payback: 1313,
        fee: 111
      }
    },
    {
      store_name: "极致",
      data: {
        orderNums: 140000,
        orderPayableAmount: 123123.3,
        actualDiscountsForInfluencer: 12,
        actualPlatformDiscount: 13,
        productCB: 222,
        kuaidi: 33,
        platFormConmission: 31,
        conmission: 22,
        leaderConmission: 44,
        payback: 1313,
        fee: 111
      }
    }
  ]

  console.log(totalData)
  const storeMap = {
    点燃: {
      orderNums: 140000,
      orderPayableAmount: 123123.3,
      actualDiscountsForInfluencer: 12,
      actualPlatformDiscount: 13,
      productCB: 222,
      kuaidi: 33,
      platFormConmission: 31,
      conmission: 22,
      leaderConmission: 44,
      payback: 1313,
      fee: 111
    },
    极致: {
      orderNums: 140000,
      orderPayableAmount: 123123.3,
      actualDiscountsForInfluencer: 12,
      actualPlatformDiscount: 13,
      productCB: 222,
      kuaidi: 33,
      platFormConmission: 31,
      conmission: 22,
      leaderConmission: 44,
      payback: 1313,
      fee: 111
    }
  }
  const storeList = Object.keys(storeMap)
  console.log(storeList)

  const sheetArray = [
    ["6月1日收益表"],
    ["店铺名称", "", "", "点燃", "极致", "合计"],
    ["订单数量", "", "", 20, 30, 50],
    ["收入", "订单应收金额", "营业收入", 1, 2, 3],
    ["", "", "销项税额（13%）", 1, 2, 3],
    ["", "", "小计", 1, 2, 3],
    ["", "平台补贴", "营业收入", 1, 2, 3],
    ["", "", "销项税额（6%）", 1, 2, 3],
    ["", "", "小计", 1, 2, 3],
    ["", "达人优惠补贴", "营业收入", 1, 2, 3],
    ["", "", "销项税额（6%）", 1, 2, 3],
    ["", "", "小计", 1, 2, 3],
    ["", "营业收入合计", "", 1, 2, 3],
    ["", "GMV", "", 1, 2, 3],
    ["成本", "平台补贴", "销项税额（6%）", 1, 2, 3],
    ["成本", "平台补贴", "小计", 1, 2, 3],
    ["成本", "达人优惠补贴", "营业收入", 1, 2, 3],
    ["成本", "达人优惠补贴", "销项税额（6%）", 1, 2, 3],
    ["成本", "达人优惠补贴", "小计", 1, 2, 3],
    ["成本", "营业收入合计", "", 1, 2, 3],
    ["成本", "GMV", "", 1, 2, 3]
  ]

  const wb = utils.book_new()
  const ws = utils.aoa_to_sheet(sheetArray)
  ws["!merges"] = [
    {
      s: {
        c: 0,
        r: 0
      },
      e: {
        c: 5,
        r: 0
      }
    },
    {
      s: {
        c: 0,
        r: 1
      },
      e: {
        c: 2,
        r: 1
      }
    },
    {
      s: {
        c: 0,
        r: 2
      },
      e: {
        c: 2,
        r: 2
      }
    },
    {
      s: {
        c: 0,
        r: 3
      },
      e: {
        c: 0,
        r: 13
      }
    },
    {
      s: {
        c: 1,
        r: 3
      },
      e: {
        c: 1,
        r: 5
      }
    },
    {
      s: {
        c: 1,
        r: 6
      },
      e: {
        c: 1,
        r: 8
      }
    },
    {
      s: {
        c: 1,
        r: 9
      },
      e: {
        c: 1,
        r: 11
      }
    },
    {
      s: {
        c: 1,
        r: 12
      },
      e: {
        c: 2,
        r: 12
      }
    },
    {
      s: {
        c: 1,
        r: 13
      },
      e: {
        c: 2,
        r: 13
      }
    }
  ]
  utils.book_append_sheet(wb, ws, "日表收益表")
  writeFile(wb, "test.xlsx")
}
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-tooltip content="刷新当前页">
            <el-button @click="exportTotalData">导出收益表</el-button>
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="erp_order_number" label="ERP订单编号" fixed />
          <el-table-column prop="order_number" label="订单编号" fixed />
          <el-table-column prop="cost" label="邮资成本" />
          <el-table-column prop="store_name" label="店铺名称" />
          <el-table-column prop="erp_data_date" label="数据日期">
            <template #default="scope">
              {{ dayjs(scope.row.data_date).format("YYYY-MM-DD") }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.size"
          :currentPage="paginationData.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
